<template>
  <div class="rank-item">
    <div class="rank-item__icon">
      <img v-if="iconUrl" :src="iconUrl" />
    </div>
    <div class="rank-item__name" :title="data.name">
      <slot v-bind:item="data" name="name">{{ data.name }}</slot>
    </div>
    <div class="rank-item__bar">
      <div class="rank-item__bar__inner" :style="{width: computedPercent}"></div>
    </div>
    <div class="rank-item__percent">{{ data.percent }}</div>
  </div>
</template>

<script>
import golden from '@/assets/golden.png'
import silver from '@/assets/silver.png'
import copper from '@/assets/copper.png'
export default {
  name: 'RankItem',
  props: {
    data: {
      type: Object,
      defaunt: () => ({})
    },
    index: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      golden,
      silver,
      copper
    }
  },
  computed: {
    computedPercent () {
      return (this.data.percent || 0) + '%';
    },
    iconUrl () {
      return this.index === 1 && golden || this.index === 2 && silver || this.index === 3 && copper || ''
    }
  }
}
</script>

<style lang="scss">
.rank-item {
  font-size: $base * 14px;
  color: #1096f5;
  display: flex;
  align-items: center;
  // font-size: $base*12px;

  .rank-item__icon {
    flex-basis: $base * 20px;
    img {
      width: 100%;
    }
  }

  .rank-item__name {
    width: $base * 66px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #fff;
    text-align: justify;
    text-align-last: justify;
    padding-left: $base * 8px;
  }
  .rank-item__bar {
    flex: 1;
    background: #f96d65;
    height: $base * 6px;
    margin-left: $base * 24px;
    margin-right: $base * 10px;
    .rank-item__bar__inner {
      height: 100%;
      background: #00bf7e;
      width: 0;
    }
  }

  .rank-item__percent {
    width: $base * 36px;
    color: #ffffff;
    text-align: left;
  }

  margin-bottom: $base * 18px;
}
</style>
